<template>
  <div class="dashboard-container">
    <div class="first">
      <el-card class="left">
        <div class="head" style="font-weight: bold">机构概述</div>
        <div class="body">
          <div class="before">
            <div class="info" style="margin-top: 20px">
              <p style="margin: 12px 0">西三旗分拣中心</p>
              <p style="font-size: 14px; margin: 0; color: #969896">
                地址：北京顺义区天澜综合保税区123号
              </p>
              <p style="font-size: 14px; margin: 8px 0 15px; color: #969896">
                负责人：赵五金 16712345678
              </p>
            </div>
            <el-button type="primary" plain>查看营业部分布</el-button>
          </div>
          <div class="after">
            <div class="cell no1">分拣中心(个)</div>
            <div class="cell no2">营业部(个)</div>
            <div class="cell no3">司机人数(个)</div>
            <div class="cell no4">快递员人数(个)</div>
          </div>
        </div>
      </el-card>
      <el-card class="right">
        <div
          class="head"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <span style="font-weight: bold">今日数据</span>
          <div class="time">
            <i
              class="el-icon-refresh"
              style="color: #bd2c00; font-weight: bold; margin-right: 8px"
            ></i>
            <span style="font-size: 14px; color: #969896">{{ nowTime }}</span>
          </div>
        </div>
        <div class="up">
          <div class="cell no1">
            <p>订单金额(元)</p>
            <div class="under">
              <span>较昨日 -</span>
              <i class="el-icon-caret-bottom"></i>
            </div>
          </div>
          <div class="cell no2">
            <p>订单数量(笔)</p>
            <div class="under">
              <span>较昨日 -</span>
              <i class="el-icon-caret-bottom"></i>
            </div>
          </div>
          <div class="cell no3">
            <p>运输任务(次)</p>
            <div class="under">
              <span>较昨日 -</span>
              <i class="el-icon-caret-bottom"></i>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="second">
      <el-card class="left">
        <div
          class="head"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div class="title">
            <span style="font-weight: bold; margin-right: 5px">待办任务</span>
            <i class="el-icon-question" style="color: gainsboro"></i>
          </div>
          <div class="time">
            <i
              class="el-icon-refresh"
              style="color: #bd2c00; font-weight: bold; margin-right: 8px"
            ></i>
            <span style="font-size: 14px; color: #969896">{{
              nowTime + " - " + lastTime
            }}</span>
          </div>
        </div>
        <div class="up">
          <div class="cell no1">
            <p>订单金额(元)</p>
            <div class="under">
              <span>较昨日 -</span>
              <i class="el-icon-caret-bottom"></i>
            </div>
          </div>
          <div class="cell no2">
            <p>订单数量(笔)</p>
            <div class="under">
              <span>较昨日 -</span>
              <i class="el-icon-caret-bottom"></i>
            </div>
          </div>
          <div class="cell no3">
            <p>运输任务(次)</p>
            <div class="under">
              <span>较昨日 -</span>
              <i class="el-icon-caret-bottom"></i>
            </div>
          </div>
        </div>
      </el-card>
      <el-card class="right">1</el-card>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { formatDate } from "@/filters";

export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
    lastTime() {
      const chuo =
        new Date(new Date().toLocaleDateString()).getTime() +
        24 * 60 * 60 * 1000 -
        1;
      return formatDate(chuo, "yyyy-MM-dd hh:mm");
    },
  },
  data() {
    return {
      nowTime: formatDate(Date.now(), "yyyy-MM-dd hh:mm"),
    };
  },
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
}
.el-card {
  box-shadow: none;
  border-radius: 4px;
  ::v-deep.el-card__body {
    height: 100%;
  }
}
.first {
  display: flex;
  width: 100%;
  height: 235px;
  .left {
    min-width: 638px;
    width: 58%;
    padding: 23px 5px;
    margin: 0 10px;
    .body {
      display: flex;
      .before {
        width: 50%;
        border-right: 1px solid #ebeef5;
      }
      .after {
        flex: 1;
        padding: 0 20px;
        display: flex;
        flex-wrap: wrap;
        .cell {
          width: 50%;
          height: 50%;
        }
      }
    }
  }
  .right {
    width: 42%;
    min-width: 447px;
    padding: 23px 5px;
    margin: 0 10px;
    .up {
      display: flex;
      justify-content: space-around;
      margin-top: 10px;
      .cell {
        width: 33.3%;
        text-align: center;
        .under {
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          span {
            color: #969896;
          }
          i {
            color: #85e22b;
            margin-left: 3px;
          }
        }
      }
    }
  }
}
.second {
  display: flex;
  width: 100%;
  height: 293px;
  margin-top: 20px;
  .left {
    width: 58%;
    padding: 23px 5px;
    margin: 0 10px;
    .up {
      display: flex;
      justify-content: space-around;
      height: 100%;
      .cell {
        width: 25%;
        height: 100%;
        .under {
          height: 100%;
        }
      }
    }
  }
  .right {
    width: 42%;
    padding: 23px 5px;
    margin: 0 10px;
  }
}
</style>
